<template>
	<view>
		<view class="body">
			<view class="logo">
				<image src="../../../static/logo.png" style="width: 200rpx;height: 200rpx;"></image>
			</view>
			<InputForm :type="login_phone" ref='myComponent'></InputForm>
			<!-- <view class="card1">
				<input type="text" v-model="phone" placeholder="请输入手机号或邮箱..." placeholder-class="text" />
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
			</view>
			<view class="card">
				<input type="password" v-model="comfirmPassword" placeholder="请输入验证码..." placeholder-class="text" />
			</view> -->
			<view class="btn" @tap="login">登录</view>

		</view>
		<view class="footer">
			<text class="">
				<text class="text" @click="retrievePassword">找回密码</text><text class="text"> | </text><text class="text"
					@click="register">新用户注册</text><text class="text"> | </text><text class="text"  @click="login_id">账号登录</text>
			</text>
		</view>
	</view>
</template>

<script>
	import InputForm from "../../../components/InputForm/InputForm.vue"
	import Valid from "../../../config/valid.js"
	export default {
		components:{InputForm},
		data() {
			return {
				id:"",
				login_phone:"login_phone",
				phone:"",
				code:"",
				getCodeText:"获取验证码",
				getCodeBtnColor:"rgb(174 174 174)",
				getCodeWaiting:false
			}
		},
		created() {
			uni.setStorage({
				key:'cur_page',
				data:'login_phone'
			})
		},
		methods: {
			login() {
				let lst=this.$refs.myComponent.getlst()
				this.phone=lst[0]
				this.code=lst[1]
				console.log(lst)
				var rules=[]
				//校验账号
				var check=Valid.check(rules)
				check.add(this.phone,[{strategy:'isNotEmpty',errorMsg:'手机号或邮箱不能为空'}])//用户名是否存在提交之后统一判断
				var error=check.start()
				if(error!==undefined){
					console.log(error)
					uni.showToast({
						icon:'none',
						title:error
					})
				}
				//校验密码
				rules=[]
				var check=Valid.check(rules)
				check.add(this.code,[{strategy:'isNotEmpty',errorMsg:'验证码不能为空'},{strategy:'CheckCode',errorMsg:'验证码无效'}])//用户名是否存在提交之后统一判断
				var error=check.start()
				if(error!==undefined){
					console.log(error)
					uni.showToast({
						icon:'none',
						title:error
					})
				}
				else{
					this.id=uni.getStorageSync('id')
					console.log(this.id)
					this.$request.TokenRequest({
						url: "/user/login"
					}, {
						type:1,
						id: this.id,
					}).then(res => {
						console.log(res)
						if(res.state === 200){
							console.log("登录成功")
							this.$store.commit("login",res.data);
							console.log(111111111111111111111)
							this.$socket.connectSocketInit();
							uni.switchTab({
								url:"../../message/message"
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.message
							})
						}
					}).catch(err=>{
						console.log(err)
					})
				}
				

			},
			retrievePassword() {
				console.log('retrieve password')
				uni.navigateTo({
					url:"../../retrieve/retrieve"
				})
			},
			register() {
				console.log('register')
				uni.navigateTo({
					url:"../../register/register"
				})
			},
			login_id(){
				console.log('login_id')
				uni.navigateTo({
					url:"../login"
				})
			},
			Timer(){},
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeWaiting){
					return;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
					uni.showToast({
						title:'手机号填写有误',
						icon:"none"
					});
					return false;
				}
				this.getCodeText="发送中"
				this.getCodeWaiting=true;
				this.getCodeBtnColor="rgb(174 174 174)"
				
				setTimeout(()=>{
					uni.showToast({
						title:"已发送验证码",
						icon:"success"
					});
					this.code='1234';//默认1234
					this.setTimer();
				},1000)
			},
			setTimer(){
				let holdTime=60;
				this.getCodeText="重新获取（60）"
				this.Timer=setInterval(()=>{
					if(holdTime<=0){
						this.getCodeWaiting=false;
						this.getCodeBtnColor="rgb(174 174 174)"
						this.getCodeText="获取验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText="重新获取("+holdTime+")"
					holdTime--;
				},1000)
			},
			
		},
		
		onShow() {
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		margin: 0 auto;
		padding-top: 340rpx;
		width: 85%;

		.logo {
			text-align: center;
			width: 100%;
			padding-bottom: 80rpx;
		}
		.btn {
			color: #FFFFFF;
			background-color: #6869a8;
			margin: 50rpx auto;
			padding: 35rpx 55rpx;
			border-radius: 200rpx;
			text-align: center;
			
			// width: 70%;
			
		}
		.card {
			background-color: #F5F5F5;
			margin: 70rpx auto;
			padding: 35rpx 55rpx;
			border-radius: 200rpx;

			// width: 70%;
			.text {
				font-size: 35rpx;
			}
		}
		.check{
			font-size:13px;
		}

		.login {
			background-color: #007AFF;
			width: 120rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			padding: 15rpx;
			border-radius: 120rpx;
			margin: 100rpx auto;
		}
	}

	.footer {
		width: 100%;
		position: absolute;
		bottom: 60rpx;
		text-align: center;

		.text {
			// font-weight: 600;
			font-size: 25rpx;
			margin: 0 15rpx;
		}
	}
</style>
